<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后台登录</title>
    <meta content="webkit|ie-comp|ie-stand" name="renderer">
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"
          name="viewport"/>
    <meta content="no-siteapp" http-equiv="Cache-Control"/>
    <link href="/plugin/login/sys.min.css" rel="stylesheet" type="text/css">
    <link href="/plugin/layui/css/layui.css" media="all" rel="stylesheet">

</head>
<script src="/plugin/login/jquery-core.min.js" type="text/javascript"></script>
<script src="/plugin/login/jquery-ui-core.min.js" type="text/javascript"></script>
<script src="/plugin/login/fai.min.js" type="text/javascript"></script>
<script src="/plugin/layui/layui.all.js" type="text/javascript"></script>
<style>
    input::-webkit-input-placeholder {
        color: #a6aebf;
    }

    input::-moz-placeholder {
        color: #a6aebf;
    }

    input:-moz-placeholder {
        color: #a6aebf;
    }

    input:-ms-input-placeholder {
        color: #a6aebf;
    }

    input:-webkit-autofill {
        -webkit-box-shadow: 0 0 0 1000px white inset !important;
    }

    html {
        height: 100%;
    }
</style>
<body id="body" style="height: 684px; background: url(plugin/login/demo2.png) 0 0 / cover no-repeat; position: static;">
<div class="main-body no-qrcode">
    <div class="new-login">
        <div class="top">
            lenosp管理平台
            <span class="bg1"></span>
            <span class="bg2"></span>
        </div>
        <form action="login" class="layui-form" id="len_form" method="post">
            <div class="bottom">
                <div class="center">
                    <div class="item">
                        <span class="icon icon-2"></span>
                        <input id="username" maxlength="20" name="username" placeholder="请输入账号" type="text">
                    </div>
                    <div class="item">
                        <span class="icon icon-3"></span>
                        <input id="loginPwd" maxlength="20" name="password" placeholder="请输入密码" type="password">
                        <input class="hide" id="loginPwdText" maxlength="20" placeholder="请输入密码" type="text">
                        <input id="isRemember" name="isRemember" type="hidden" value="false"/>
                        <span class="icon icon-4"></span>
                    </div>
                    <div class="item" id="validatePanel" style="width: 137px;">
                        <input id="code" maxlength="4" name="code" placeholder="请输入验证码" type="text">
                        <img class="validateImg" id="codeImg">
                        <span class="icon icon-6" id="validateRefresh"></span>
                    </div>
                </div>
                <div class="tip">
                    <span class="icon-nocheck" id="autoLogin"></span>
                    <span class="login-tip">两周内自动登录</span>
                </div>
                <div style="width: 300px;height: 50px;text-align: center;margin: 24px auto 0;">
                    <input class="deal" id="loginBtn" type="submit" value="立即登录">
                </div>
            </div>
        </form>
    </div>
</div>
<script src="/plugin/validator/validator.min.js" type="text/javascript"></script>
<script>
    function randomCode() {
        $('#codeImg').attr('src', '/getCode?' + Math.random());
    }

    randomCode();
    new Validator('len_form', [
        {
            name: 'username',
            display: "用户名不能为空",
            rules: 'required'
        }, {
            name: 'password',
            display: "密码不能为空",
            rules: 'required'
        }, {
            name: 'code',
            display: "验证码不能为空",
            rules: 'required'
        },
    ], function (obj) {
        if (obj.errors) {
            layer.msg(obj.errors[0].display, {icon: 5, anim: 6, offset: 't'});
        }
    });
    $(function () {
        // 加载背景图片
        $("#body").css('background', 'url("/plugin/login/demo2.png") no-repeat');
        $("#body").css('backgroundSize', 'cover');


        // 是否两周内自动登录
        $('.icon-nocheck, .login-tip').click(function () {
            $('.icon-nocheck').toggleClass('icon-check');
            var isRemember = $('#isRemember').val();
            if (isRemember === 'false') {
                isRemember = 'true';
            } else {
                isRemember = 'false'
            }
            $('#isRemember').val(isRemember);
        });

        layer = layui.layer;
        var msg = '${message}';
        let username = '${username}';
        if (msg.trim() !== "") {
            $("*[name='username']").val(username);
            layer.msg(msg, {icon: 5, anim: 6, offset: 't'});
        }
        $("#codeImg,#validateRefresh").click(function () {
            randomCode();
        });

        //密码展示/隐藏
        $('.icon-4').click(function () {
            $(this).toggleClass('icon-5');
            var pwdObj = $('#loginPwd');
            var pwdTextObj = $('#loginPwdText');
            var pwd = $(this).hasClass('icon-5') ? pwdObj.val() : pwdTextObj.val();
            pwdObj.toggleClass('hide').val(pwd);
            pwdTextObj.toggleClass('hide').val(pwd);
        });

        $("#loginPwdText").change(function () {
            $('#loginPwd').val($("#loginPwdText").val());
        });
    });

    if (window != top)
        top.location.href = location.href;

</script>
</body>
</html>